<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    li{
        list-style:none;
        float:left;
        padding:5px 10px;
        background-color:grey;
        color:#fff;
        cursor:pointer;
        width: 60px;

    }
    li.active{
        background-color:#fff;
        color:#000;
    }
    ul:after{
        content:"";
        display:block;
        clear:both;
    }
    #contentWp div {
        width: 400px;
        height: 400px;
        color:#fff;
        background-color:orange;
        display:none;
 }

    #contentWp .on{
       display:block;
    }

    </style>
</head>
<body>
    <div>
        <ul>
            <li class="active">科学</li>
            <li>贴吧</li>
            <li>音乐</li>
            <li>频道</li>
            <li>知道</li>
        </ul>
        <div id="contentWp">
            <div class="on">科学</div>
            <div>贴吧</div>
            <div>音乐</div>
            <div>频道</div>
            <div>知道</div>
        </div>
    </div>
    <script>
    var lis = document.getElementsByTagName('li');
    var contentWp = document.getElementById('contentWp');
    var divs = contentWp.getElementsByTagName('div');


    for(var i = 0;i<lis.length;i++) {
        lis[i].setAttribute('data_index',i);
        lis[i].setAttribute('onclick','showContent(this)');   
    }

    function showContent(li){
        li.setAttribute('class','active');

        for(var o=0;o<lis.length;o++) {
            if(lis[o] !=li) {
                lis[o].setAttribute('class','');
            }
        }
        var index = li.getAttribute('data_index');

        for(var k = 0;k<divs.length;k++){
            divs[index].setAttribute('class','on');
            if(k !=index) {
                divs[k].setAttribute('class','');
            }
        }
    }
    </script>
</body>
</html>